import * as THREE from "three";
//导入轨道
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
//导入动画库
import gsap from "gsap";
//导入dat.gui
import * as dat from "dat.gui"

//1.创建场景
const scene=new THREE.Scene()

//2.创建相机
//透视相机
//                                       角度
const camera=new THREE.PerspectiveCamera(90,window.innerHeight/window.innerHeight,
0.1,
1000
)
//设置相机位置参数
camera.position.set(0,0,10);

//添加相机到场景当中
scene.add(camera);

//添加物体
//创建几何体
const cubeGeometry=new THREE.BufferGeometry();
//自定义顶点矩形
const vertices=new Float32Array([
    -1.0, -1.0,  1.0,
	 1.0, -1.0,  1.0,
	 1.0,  1.0,  1.0,

	 1.0,  1.0,  1.0,
	-1.0,  1.0,  1.0,
	-1.0, -1.0,  1.0
])

cubeGeometry.setAttribute("position",new THREE.BufferAttribute(vertices,3))

// 设置材质
const CubeMeterial=new THREE.MeshBasicMaterial({
    color:0xffff00
}) 
//重新创建物体
const mesh=new THREE.Mesh(cubeGeometry,CubeMeterial);
console.log(mesh);
scene.add(mesh);




//模拟坐标
const axesHelper=new THREE.AxesHelper(5)

// 将几何体添加到场景当中
// scene.add(cube);
//添加坐标轴
scene.add(axesHelper);

//初始化渲染器
const renderer=new THREE.WebGL1Renderer();
//设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerWidth);


//将渲染的内容添加到画布上
document.body.appendChild(renderer.domElement);

//使用渲染器，通过相机将场景渲染进来
 renderer.render(scene,camera);

//创建轨道控制器
const controls=new OrbitControls(camera,renderer.domElement);
//设置轨道控制器的阻尼,必须要在动画循环里面调用update()
controls.enableDamping=true;

//设置时钟
const clock=new THREE.Clock();


function render(time){
    controls.update();
    renderer.render(scene,camera);
    requestAnimationFrame(render);
}

render();
